<template>
   <div class="app-container">
       <div class="item hauto ld">
            <fieldset>
            <legend>客户基本信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">客户姓名：</span><span class="value">{{customerName}}</span>
                    <span class="name">联系电话：</span><span class="value">{{phone}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">性别：</span><span class="value">{{customerGender}}</span>
                    <span class="name">微信：</span><span class="value">{{customerWeixin}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">详细地址:</span><span class="value">{{customerAddress}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">客户来源：</span><span class="value">{{customerGender}}</span>
                    <span class="name">购车次数：</span><span class="value">{{customerWeixin}}</span>
                </div>
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
            <fieldset>
            <legend>到访信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">接洽方式：</span><span class="value">{{customerName}}</span>
                    <span class="name">来访人数：</span><span class="value">{{phone}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">开始时间：</span><span class="value">{{starttime}}</span>
                    <span class="name">结束时间：</span><span class="value">{{endtime}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">销售顾问</span><span class="value">{{guider}}</span>
                    <span class="name"></span><span></span>
                </div>
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
            <fieldset>
            <legend>意向信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">意向车型：</span><span class="value">{{intentionCar}}</span>
                    <span class="name">客户期望：</span><span class="value">{{intentionPrice}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">自店报价：</span><span class="value">{{shopPrice}}</span>
                    <span class="name"></span><span></span>
                </div>
                <div class="fd-item">
                    <span class="name">备注</span><span class="value">{{remark}}</span>
                </div>
            </div>
            </fieldset>
        </div>
   </div>
</template>

<script>

import * as receptionApi from '@/api/presale/reception'

export default {
    data(){
        return {
            id:'',
            phone:'',
            starttime:'',
            endtime:'',
            customerName:'',
            customerGender:1,
            customerWeixin:'',
            customerSource:0,
            customerAddress:'',
            buytimes:0,
            contactType:0,
            visitorNumber:0,
            guider:'',
            intentionCar:'',
            intentionPrice:0,
            shopPrice:0,
            remark:'',
        }
    },
    created(){
        this.id=this.$route.params.id || '';
        this.fetchData();
    },
    methods:{
        fetchData(){
            var that=this;
            receptionApi.getRecordDetails({id:that.id}).then(res=>{
                if(res.data){
                    for(var key in that){
                        if(res.data[key.toLowerCase()]!==undefined){
                            that[key]=res.data[key.toLowerCase()];
                        }
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
  .item.ld{
        padding:5px 10px;margin-bottom:20px;
    }
   .item.ld>fieldset{
        width:100%;
    }
    .fd-content>.fd-item{
        padding:5px 10px; display: flex; 
    }
    .fd-content>.fd-item>span.name{
        width:100px; display: flex; align-items: center;
        color:#999;
    }
    .fd-content>.fd-item>span.value{
        width:300px; display: flex; align-items: center;
    }
</style>